<template>
    <div class="self-detail-wrapper">
        <head-date></head-date>
        <el-button type="primary" size="small" @click="back" class="f-l"><i class="fa fa-mail-reply"></i>&nbsp;返回</el-button>
        <div class="person-logo"><i class="fa fa-user"></i>&nbsp;个人信息</div>
        <el-form :model="ruleForm" label-width="70px" class="form">
            <el-form-item label="工号" prop="worknum">
                <el-input :disabled="true" v-model="ruleForm.worknum"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="username">
                <el-input :disabled="true" v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="职务" prop="job">
                <el-select style="width: 100%" :disabled="true" v-model="ruleForm.job" placeholder="请选择职务">
                    <el-option label="主任" value="主任"></el-option>
                    <el-option label="科长" value="科长"></el-option>
                    <el-option label="科员" value="科员"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="固定座机" prop="tel">
                <el-input v-model="ruleForm.tel"></el-input>
            </el-form-item>
            <el-form-item label="办公楼层" prop="office">
                <el-input v-model="ruleForm.office"></el-input>
            </el-form-item>
            <el-form-item class="f-r">
                <el-button @click="resetForm('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import headDate from './header/headDate.vue'
import _ from 'lodash'

export default {
    name: 'selfDetail',
    data: function() {	
        return {
            ruleForm: {
                worknum: '',
                username: '',
                phone: '',
                tel: '',
                job: '',
                office: '',
            }
        }
    },
    components: {
        headDate
    },
    computed: {
        currentUser(){
            return localStorage
        }
    },
    methods: {
        submitForm(formName) {
            this.$$http("EDIT_USER_INFO", localStorage.userid, {
                userid:localStorage.userid,
                worknum: this.ruleForm.worknum,
                username: this.ruleForm.username,
                phone: this.ruleForm.phone,
                tel: this.ruleForm.tel,
                job: this.ruleForm.job,
                office: this.ruleForm.office
            }).then(data => {
                console.log(data)
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
            })
        },
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.dialogFormVisible = false
        },
        fillCurrentUser() {
            _.forEach(this.ruleForm, (item, key)=>{
                console.log(item,'-------------' ,key)
                this.ruleForm[key] = this.currentUser[key]
            })
        },
        back(){
            history.go(-1)
        }
    },
    mounted() {
        this.fillCurrentUser()
    }
}
</script>

<style lang="scss">
.self-detail-wrapper{
    width: 1200px;
    margin: 0 auto;
    .person-logo{
        font-size: 28px;
        width: 150px;
        margin: 0 auto
    }
    .form{
        width: 600px;
        margin: 50px auto
    }
    .el-input.is-disabled .el-input__inner {
        background-color: #fff;
        border-color: #67c23a;
        color: #2d2f33;
        cursor: not-allowed;
    }
}
</style>